<template>
    <div class="containerBox">
        <el-button-group>
            <el-button type="primary" @click="handleUndo">后退</el-button>
            <el-button type="success" @click="handleRedo">前进</el-button>
            <el-button type="warning" @click="handleDownload">下载</el-button>
            <!-- <el-upload
                    style="display: inline-block;"
                    :file-list="fileList"
                    class="upload-demo"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :http-request="httpRequest"
                    :on-change="handleOnchangeFile"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
            > -->
            <el-button type="danger">导入</el-button>
        </el-button-group>
        <div ref="container"></div>
    </div>
</template>
<script lang="ts" setup>
import BpmnModeler from "bpmn-js"
import { onMounted, ref } from "vue";
const container = ref(null)
const containerEl = ref()
const fileList = ref()
const bpmnModeler = new BpmnModeler({
    container: container.value,
    // moddleExtensions: { camunda: camundaExtension },
    // additionalModules: [CustomPaletteProvider]
})
const initbpmn = () => {
    bpmnModeler.createDiagram(() => {
        bpmnModeler.get('canvas').zoom('fit-viewport');
    });
}
onMounted(() => {
    const bpmnModeler = new BpmnModeler({
        container: container.value,
        // moddleExtensions: { camunda: camundaExtension },
        // additionalModules: [CustomPaletteProvider]
    })
    bpmnModeler.createDiagram(() => {
        bpmnModeler.get('canvas').zoom('fit-viewport');
    });
})
</script>
<style>
.containerBox {
    height: calc(100vh - 220px);
    position: relative;

}

#container {
    height: calc(100% - 50px);
}
</style>